<template>
  <div class="app-container">
    <el-card>
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部用户" name="0"></el-tab-pane>
        <el-tab-pane label="小程序用户" name="1"></el-tab-pane>
      </el-tabs> -->
      <el-form ref="searchForm" :model="searchForm" size="mini" :inline="true">
        <div>
          <!--          <el-form-item label="姓名：">-->
          <!--            <el-input v-model="searchForm.realname" placeholder="请输入姓名" />-->
          <!--          </el-form-item>-->
          <el-form-item label="用户名/手机号：">
            <el-input v-model="searchForm.account" placeholder="用户名/手机号" />
          </el-form-item>
           <el-form-item label="社交ID：">
            <el-input v-model="searchForm.socialId" placeholder="用户名/手机号" />
          </el-form-item>
          <!-- <el-form-item label="性别：">
            <el-radio-group v-model="searchForm.gender">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="1">未知</el-radio-button>
              <el-radio-button label="2">男</el-radio-button>
              <el-radio-button label="3">女</el-radio-button>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="创建时间：" prop="startTime">
            <el-date-picker style="width: 200px" v-model="searchForm.beginTime" align="right" type="date"
              placeholder="选择开始日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日">
            </el-date-picker>
          </el-form-item>
          <el-form-item>-</el-form-item>
          <el-form-item>
            <el-date-picker v-model="searchForm.endTime" align="right" type="date" placeholder="选择结束日期"
              :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetList">重置</el-button>
            <el-button icon="el-icon-search" type="primary" @click="searchList('searchForm')">查询</el-button>
            <!-- <el-button icon="el-icon-search" type="primary" @click="editMember"
              >修复账号</el-button
            > -->
          </el-form-item>
        </div>
      </el-form>

      <el-table :data="tableData.data" style="margin-top: 10px" border size="mini" @selection-change="selectTableList"
        v-loading="listLoading" row-key="id">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
        <el-table-column prop="socialId" label="社交ID" align="center"></el-table-column>
        <el-table-column prop="channelName" label="来源渠道" align="center">
        </el-table-column>

        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.icon" :preview-src-list="[scope.row.icon]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="180" align="center"></el-table-column>
        <el-table-column label="手机号" align="center" width="180">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center; cursor: pointer; justify-content: center;"
              @click="openEye(scope.$index, scope.row)">
              <span style="margin-right: 5px;"> {{ scope.row.checkPhone ? scope.row.phoneNumber : scope.row.phone }}
              </span>
              <img style="width: 18px; height: 12px; line-height: 16px"
                :src="scope.row.checkPhone ? require('@/assets/icon/eye.png') : require('@/assets/icon/openEye.png')" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.gender != null" size="mini">{{
              scope.row.gender | z
              }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="身份" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.userType == 1 ? 'warning' : 'info'">{{ scope.row.userType == 1 ? "客户经理"
              : "普通用户" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="会员类型" align="center">
          <template slot-scope="scope">
            <el-tag size="mini">
              {{ getDicLabel(typeList, scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? "正常" :
              "禁用" }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="lastLoginTime" align="center" label="最后登录时间" width="180"></el-table-column>

        <el-table-column prop="createTime" label="创建时间" width="180" align="center">
        </el-table-column>
        <el-table-column align="center" label="用户类型">
          <template slot-scope="scope">
            <div>{{ scope.row.loginType | loginTypeFilter }}</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="seeDetail(scope.row)">查看</el-button>
            <el-button v-btnpermission="$btnPer.userBtnrules.editPhone" type="text" size="mini"
              @click="editUserPhone(scope.row)">修改手机号</el-button>
            <el-button v-btnpermission="$btnPer.userBtnrules.bindSystemAdmin" v-if="scope.row.userType == 0" type="text"
              size="mini" @click="editUser(scope.row)">绑定系统账号</el-button>
            <el-button v-btnpermission="$btnPer.userBtnrules.editUser" type="text" size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pageRight" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
      </el-pagination>
    </el-card>

    <member-detail @closeUserDialog="closeUserDialog" :userInfo="userInfo"
      :detailVisible="detailVisible"></member-detail>
    <edit-user-member ref="editUserMember"></edit-user-member>
    <user-detail :userInfo="userInfo" ref="userDetail"></user-detail>
  </div>
</template>

<script>
import { pickerOptions, tableData1 } from "../options";
import { getMemberRealInfo } from "@/api/member";
import userDetail from "./componnets/userDetail.vue";
import { authDate } from "@/utils/date.js";
import {
  getMemberList,
  getMemberDetailById,
  editMemberPhone,
  unbindUser,
} from "@/api/member";
import memberDetail from "./componnets/detail.vue";
import editUserMember from "./componnets/editUserMember.vue";
export default {
  components: {
    memberDetail,
    editUserMember,
    userDetail,
  },
  filters: {
    z(value) {
      const sexMap = {
        0: "未知",
        1: "男",
        2: "女",
      };
      return sexMap[value];
    },
    loginTypeFilter(value) {
      const loginTypeMap = {
        h5: "h5用户",
        routine: "小程序用户",
        wechat: "公众号用户",
      };
      return loginTypeMap[value];
    },
  },
  data() {
    return {
      searchForm: {
        account: "",
        beginTime: "",
        endTime: "",
        socialId: '',
        pageNum: 1,
        pageSize: 10,
      },
      activeName: "0",
      pickerOptions,
      tableData: {
        data: [],
        total: 0,
      },
      listLoading: false,
      detailVisible: false,
      userInfo: {},
      typeList: [],
    };
  },
  async created() {
    this.getlist();
    this.typeList = await this.$getDictData("account_type");
  },

  methods: {
    openEye(idx, v) {
      if (v.checkPhone) return this.tableData.data[idx].checkPhone = false
      let params = {
        id: v.id,
        type: 'phone'
      };
      getMemberRealInfo(params).then(res => {
        if (res.data) {
          this.tableData.data[idx].checkPhone = true
          this.tableData.data[idx].phoneNumber = res.data
        }
      })
    },
    getDicLabel(arr, value) {
      let item = arr.find((item) => {
        return item.dictValue == value;
      });
      try {
        return item.dictLabel;
      } catch (error) {
        return "";
      }
    },
    editMember() {
      unbindUser().then((res) => {
        console.log("res", res);
      });
    },
    seeDetail(v) {
      this.$refs.userDetail.opendialog(v);
      getMemberDetailById(v.id).then((res) => {
        this.userInfo = res.data;
      });
    },
    closeUserDialog(e) {
      this.$set(this, "detailVisible", false);
      e && this.getlist();
    },
    handleEdit(row) {
      getMemberDetailById(row.id).then((res) => {
        this.userInfo = res.data;
        this.detailVisible = true;
      });
    },
    editUserPhone(row) {
      let that = this;
      this.$prompt("修改手机号", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: row.phone,
        inputPlaceholder: "请输入手机号",
        // inputValidator: (value) => { if(!value) return '输入不能为空'}
        inputPattern: /^1[3456789]\d{9}$/,
        inputErrorMessage: "手机号格式不正确",
      })
        .then(({ value }) => {
          console.log(value, row.id);
          editMemberPhone({ phone: value, id: row.id }).then((res) => {
            if (res.code == 200) {
              that.$message.success("修改成功");
              that.getlist();
            }
          });
        })
        .catch(() => {
          this.$message.info("取消输入");
        });
    },
    searchList() {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 10;
      authDate(this.searchForm.beginTime, this.searchForm.endTime, (v) => {
        if (!v.type) {
          return this.$message.warning(v.msg);
        } else {
          this.getlist();
        }
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getlist();
    },
    editUser(v) {
      this.$refs.editUserMember.openLog(v);
    },
    selectTableList() { },
    handleClick(val) {
      //   this.activeName = val.index;
    },
    resetList() {
      this.searchForm = {
        account: "",
        beginTime: "",
        endTime: "",
        socialId: '',
        pageNum: 1,
        pageSize: 10,
      };
      this.getlist();
    },
    getlist() {
      this.listLoading = true;
      getMemberList(this.searchForm)
        .then((res) => {


          res.data.list.forEach(v => {
            v.checkPhone = false
            v.phoneNumber = ''
          })

          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;

          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
      // console.log(this.searchForm);
    },
  },
};
</script>

<style lang="scss" scoped></style>
